<?php slot('bannerCycle'); ?>
<?php if($banners):?>
<div id="home_feature">
    <div class="background">
	<div class="inner">
		    
	    <div id="slider_thumbnails"><div id="slider_preview_img"></div></div>
	    <div id="loading_slider"></div>
	    <div id="slider_img">

	    <?php foreach($banners as $banner): ?>

		<div class="image_loader slider_cropped">
		    <div class="slider_content">
			<h2><?php echo $banner['name'] ?></h2>
			<p><?php echo $banner['content'] ?></p>
			
			<a class="button" href="<?php echo $banner['link'] ?>"><?php echo __('Loe edasi'); ?></a>
		    </div>
		    <div class="slider_img_cropped">
			<a href="<?php echo $banner['link'] ?>" class="load_slider_img">
			    <span class="rm_img"><img src="<?php echo @myPicture::getInstance($banner['file'])->thumbnail(600,340,'center')->url() ?>" alt="" /></span>	
			</a>
		    </div>
		</div>
	    
	    <?php endforeach; ?>
			    
	    </div>
			
			
			
	</div><!-- inner -->							
    </div><!-- background -->							
</div><!-- home_feature -->
<script type="text/javascript">
    jQuery('#header').height('97px');
</script>
<?php endif; ?>
<?php end_slot() ?>

<?php /*
		<!-- start homepage slider stage -->
		<div class="image_loader slider_cropped">
		    <div class="slider_content">
			<h2>A Staged Image</h2>
			<p>This slider setting is ideal for large panoramic billboard style displays.</p>
			<p>When using this setting all you need to do is create an image 960px * 340px and it will be 
			    placed on top of the staging effect you see here.</p>
		    </div>
		    <div class="slider_img_cropped">
			<a href="#" class="load_slider_img">
			    <span class="rm_img"><img src="/project_css_js/slides/1.jpg" alt="" /></span>	
			</a>
		    </div>
		</div>
		<!-- end homepage slider_cropped -->
			    
			    
		<!-- start homepage slider stage -->
		<div class="image_loader slider_cropped">
		    <div class="slider_content">
			<h2>Another Staged Image</h2>
			<p>Alternatively, since the image you add floats to the right, 
			    this layout also looks great with image dimensions 600px * 340px.</p>
			<p>If you like you can also add a button like the one below.</p>
			<a class="button" href="#">Read More</a>
		    </div>
		    <div class="slider_img_cropped">
			<a href="#" class="load_slider_img">
			    <span class="rm_img"><img src="/project_css_js/slides/2.jpg" alt="" /></span>	
			</a>
		    </div>
		</div>
		<!-- end homepage slider_cropped -->
			    
			    
		<!-- start homepage slider full -->
		<div class="image_loader slider_full">
		    <div class="slider_content">
			<!-- With this layout, typically you will want to make the text part of the image -->
		    </div>
		    <div class="slider_img_full">
			<a href="#" class="load_slider_img">
			    <span class="rm_img"><img src="/project_css_js/slides/3.png" alt="" /></span>
			</a>
		    </div>
		</div>
		<!-- end homepage slider_full_cropped -->
			    
			    
		<!-- start homepage slider framed -->
		<div class="image_loader slider_full">
		    <div class="slider_content">
			<h2>A Staged and Framed Image</h2>
			<p>With this slide effect simply create an image with dimensions 600px * 340px and
			    the staging effect and frame will be added automatically.</p>
			<a class="button" href="">Read More</a>
		    </div>
		    <div class="slider_img_full_cropped">
			<a href="#" class="load_slider_img">
			    <span class="rm_img"><img src="/project_css_js/slides/4.jpg" alt="" /></span>
			    <span class="slider_frame"></span>
			</a>
		    </div>
		</div>
		<!-- end homepage slider_full_cropped -->
*/ ?>
 